<template>
	<view>
		<scroll-view class="scroll-view-x" :scrollLeft="data.scrollLeft" scrollWithAnimation="true" scrollX="true">
    <view @tap="switchNav" :class="['scroll-view-item', data.cid==0?'active':'']" data-id="0">
        热销
    </view>
    <view @tap="switchNav" :class="['scroll-view-item', data.cid==item.id?'active':'']" data-id="0" v-for="(item,index) in data.cat" :key="unique">
         {{item.name}}
    </view>
</scroll-view>
	</view>
</template>

<script>var myVue = {};
	export default {
		props: ['data'],
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped>
.scroll-view-x {
    background-color: #fff;
    white-space: nowrap;
}

.scroll-view-x .scroll-view-item {
    display: inline-block;
    margin: 16upx 0upx 16upx 46upx;
    padding: 0 24upx;
    font-size: 13pt;
    color: #666666;
    height: 60upx;
    line-height: 60upx;
}

.scroll-view-y {
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
}

swiper {
    height: 304upx;
}

.scroll-view-x .active {
    color: #fff;
    border-radius: 30upx;
    background: -webkit-gradient(linear,left top,right bottom,color-stop(0%,#ffa360),color-stop(140%,#ff5c5c));
    height: 60upx;
}
</style>
